<template>
  <a-modal
    :visible="props.visible"
    :title="title + '意见'"
    @cancel="handleCancel"
    @ok="handleBeforeOk"
  >
    <!-- @before-ok="handleBeforeOk" -->
    <a-space :direction="'vertical'" fill>
      <a-space fill>
        {{ title }}意见
        <a-textarea
          v-model="copyOpinions"
          :placeholder="title + '意见'"
          :max-length="100"
          allow-clear
          show-word-limit
          :style="{ width: '320px' }"
        />
      </a-space>
      <a-space v-if="props.approverList?.length">
        退回至
        <a-select
          v-model="backNodeId"
          :style="{ width: '320px' }"
          :field-names="fieldNames"
          placeholder="默认上一个审批人"
        >
          <a-option
            v-for="item in props.approverList"
            :key="item.id"
            :value="item.id"
            >{{ item.pointName }}{{ item.id }}</a-option
          >
        </a-select>
      </a-space>
    </a-space>
  </a-modal>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import type { PointDetail } from '@/apis/approvalExecute/type';

const props = withDefaults(
  defineProps<{
    opinions?: string;
    visible?: boolean;
    approverList?: PointDetail[];
    backNodeId?: number;
    approvalType?: number;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'submit', 'update:backNodeId']);
const close = () => {
  emit('update:visible', false);
};
const handleCancel = () => {
  close();
};
const handleBeforeOk = () => {
  emit('update:backNodeId', Number(backNodeId.value));
  emit('submit', copyOpinions.value);

  close();
};
const copyOpinions = ref(clonedeep(props.opinions));
const fieldNames = { value: 'id', label: 'pointName' };
const backNodeId = ref();
watch(
  () => props.approverList,
  () => {
    if (!props.approverList?.length) return;
    backNodeId.value = props.approverList[props.approverList?.length - 1].id;
  }
);
const title = computed(() => {
  if (props.approvalType === 1) return '同意';
  if (props.approvalType === 2) return '退回';
  if (props.approvalType === 3) return '拒绝';
  return '';
});
</script>
